/**
 * @file 大屏配置
 * @date 2020-05-15
 */

import React, {Component, Fragment} from 'react';
import ClipboardJS from 'clipboard';
import {Link, withRouter} from 'react-router-dom';
import axios from 'axios';
import {Card, Button, Divider, Popconfirm, message} from 'antd';
import DataDetail from '~/component/DataDetail';
import {copyUrl} from '~/utils/common/envType';
import {getScreenList, deleteScreen} from '~/service/screen';
import hasAuth from '~/utils/common/authCheck';
import './index.styl';

const {CancelToken} = axios;
const source = CancelToken.source();

const copyBtn = new ClipboardJS('.copyBtn');
copyBtn.on('success', e => {
    message.success('复制成功');
    e.clearSelection();
});
copyBtn.on('error', e => {
    console.log(e.action);
});

class BigScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            loading: false,
            pager: {
                pageNum: 1,
                pageSize: 10
            },
            name: ''
        };
    }

    componentDidMount() {
        const {pager} = this.state;
        // 页面权限判断
        const {match: {params}, history} = this.props;
        if (!hasAuth(params.id)) {
            history.replace('/noAuth');
        }

        this.getBigscreenList(pager);
        document.body.classList.add('screenList');
    }

    // eslint-disable-next-line class-methods-use-this
    componentWillUnmount() {
        document.body.classList.remove('screenList');
    }

    // page change
    onPageChange = (page, size) => {
        const params = {};
        params.pageNum = page;
        params.pageSize = size;
        this.getBigscreenList(params);
    };

    // 删除大屏
    onDelete = id => () => {
        deleteScreen({id}).then(res => {
            if (res) {
                message.success('删除成功');
                const {pager: {pageSize, pageNum}} = this.state;
                this.getBigscreenList({pageNum, pageSize});
            }
        });
    };

    // 获取大屏的列表数据
    getBigscreenList = pager => {
        const {name} = this.state;
        const params = {pager, name};
        this.setState({
            loading: true
        });

        getScreenList(params, source.token).then(res => {
            const {data: {items = []}, pager} = res;
            this.setState({
                dataSource: items,
                pager,
                loading: false
            });
        })
            .catch(() => {
                this.setState({
                    loading: false
                });
            });
    };

    // 获取大屏列表表头
    getColumns = () => [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 200,
        },
        {
            title: '大屏类型',
            dataIndex: 'screenType',
            key: 'screenType',
            width: 200,
            render(text, record) {
                const type = {
                    1: '总金额大屏',
                    2: '团队&个人金额排行大屏'
                };
                return type[text];
            }
        },
        {
            title: '创建人',
            dataIndex: 'creator',
            key: 'creator',
            width: 150,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 200,
        },
        {
            title: '操作',
            dataIndex: 'operation',
            width: 300,
            // fixed: 'right',
            render: (text, record) => {
                const paramsId = escape(`${record.id}类型${record.screenType}`);
                const Href = encodeURI(`${copyUrl}/screenPage/${paramsId}`);
                return (
                    <div className="op-box">
                        <Link to={{pathname: `/manage/screen/edit/${record.id}`}} >编辑</Link>
                        <Divider type="vertical" />
                        <Popconfirm
                            title="确定删除?"
                            onConfirm={this.onDelete(record.id)}
                            okText="是"
                            cancelText="否"
                        >
                            <Button
                                type="link" data-id={record.id} data-type="delete"
                            >
                                删除
                            </Button>
                        </Popconfirm>
                        <Divider type="vertical" />
                        {
                            record.screenType === 2 && (
                                <Fragment>
                                    <Link to={{
                                        pathname: '/manage/screen/create',
                                        search: `copyId=${record.id}`
                                    }}
                                    >
                                        复制大屏
                                    </Link>
                                    <Divider type="vertical" />
                                </Fragment>
                            )
                        }
                        <Button
                            type="link" class="copyBtn"
                            data-clipboard-text={Href}
                        >
                            复制链接
                        </Button>
                    </div>
                );
            }
        }
    ];

    render() {
        const {dataSource, loading, pager} = this.state;

        return (
            <Card title={
                (
                    <div style={{width: '100%', position: 'relative'}}>
                        <div>大屏列表</div>
                        <div style={{position: 'absolute', right: 20, top: 0}}>
                            <Button type="primary">
                                <Link to={{pathname: '/manage/screen/create'}}>新建大屏</Link>
                            </Button>
                        </div>
                    </div>
                )
            }
            >
                <DataDetail
                    rowKey="id" pagination={pager} isLoading={loading}
                    dataSource={dataSource} columns={this.getColumns()}
                    onPageChange={this.onPageChange}
                />
            </Card>
        );
    }
}

export default withRouter(BigScreen);
